<template>
    <div>
        <header class="home-header-nav">
            <div class="content">
                <!-- <a class="logo" href="//www.youzanyun.com"></a> -->
                <div class="header-content">
                    <div class="header-item">
                        <a class="title">
                            <span>解决方案</span>
                            <img class="header-arrow-down" src="//su.yzcdn.cn/static/yun-layout/img/arrow-down.png">
                        </a>
                        <div class="drop-list document-list">


                            <div>
                                <div class="document-item">
                                    <a href="//www.youzanyun.com/ecommerce">
                                        <p class="text-14">电商云</p>
                                    </a>
                                </div>
                            </div>



                            <div>
                                <div class="document-item">
                                    <a href="//design.youzan.com">
                                        <p class="text-14">Zan Design</p>
                                    </a>
                                </div>
                            </div>



                            <div>
                                <div class="document-item">
                                    <a href="//www.youzanyun.com/migration">
                                        <p class="text-14">电商迁移</p>
                                    </a>
                                </div>
                            </div>



                            <div>
                                <div class="document-item">
                                    <a href="//www.youzanyun.com/datalink">
                                        <p class="text-14">数据通服务</p>
                                    </a>
                                </div>
                            </div>



                            <div>
                                <div class="document-item">
                                    <a href="//www.youzanyun.com/app/sdk">
                                        <p class="text-14">App开店</p>
                                    </a>
                                </div>
                            </div>



                            <div>
                                <div class="document-item">
                                    <a href="https://www.youzanyun.com/retail">
                                        <p class="text-14">零售云</p>
                                    </a>
                                </div>
                            </div>










                        </div>
                    </div>
                    <div class="header-item">
                        <a class="title" target="_blank" href="//app.youzanyun.com/">应用市场</a>
                    </div>
                    <div class="header-item">
                        <a class="title">
                            <span>文档中心</span>
                            <img class="header-arrow-down" src="//su.yzcdn.cn/static/yun-layout/img/arrow-down.png">
                        </a>
                        <div class="drop-list document-list">

                            <div>
                                <div class="document-item">
                                    <a href="https://doc.youzanyun.com/home">
                                        <p class="text-14">文档中心</p>
                                    </a>
                                </div>
                            </div>

                            <div>
                                <div class="document-item">
                                    <a href="https://doc.youzanyun.com/list/API/">
                                        <p class="text-14">API列表</p>
                                    </a>
                                </div>
                            </div>

                            <div>
                                <div class="document-item">
                                    <a href="https://doc.youzanyun.com/list/MSG/">
                                        <p class="text-14">消息推送</p>
                                    </a>
                                </div>
                            </div>

                            <div>
                                <div class="document-item">
                                    <a href="https://doc.youzanyun.com/list/EXT/">
                                        <p class="text-14">后端扩展</p>
                                    </a>
                                </div>
                            </div>

                            <div>
                                <div class="document-item">
                                    <a href="https://doc.youzanyun.com/resource/front/40177">
                                        <p class="text-14">前端扩展</p>
                                    </a>
                                </div>
                            </div>

                            <div>
                                <div class="document-item">
                                    <a href="https://doc.youzanyun.com/resource/develop-guide/41185/41367">
                                        <p class="text-14">本地调试工具</p>
                                    </a>
                                </div>
                            </div>

                            <div>
                                <div class="document-item">
                                    <a href="https://doc.youzanyun.com/resource/develop-guide/41185/41364">
                                        <p class="text-14">API调试工具</p>
                                    </a>
                                </div>
                            </div>

                            <div>
                                <div class="document-item">
                                    <a href="https://doc.youzanyun.com/resource/develop-guide/41185/41365">
                                        <p class="text-14">消息调试工具</p>
                                    </a>
                                </div>
                            </div>

                            <div>
                                <div class="document-item">
                                    <a href="https://doc.youzanyun.com/resource/develop-guide/41185/41366">
                                        <p class="text-14">API日志排查</p>
                                    </a>
                                </div>
                            </div>

                        </div>
                    </div>
                    <div class="header-item">
                        <a class="title" href="https://www.youzanyun.com/developer">
                            <span>开发者</span>
                            <img class="header-arrow-down" src="//su.yzcdn.cn/static/yun-layout/img/arrow-down.png">
                        </a>
                        <div class="drop-list document-list">



                            <div class="document-item">
                                <a href="https://www.youzanyun.com/developer">
                                    <p class="text-14">开发者入驻</p>
                                </a>
                            </div>





                            <div class="document-item">
                                <a href="https://doc.youzanyun.com" target="_blank">
                                    <p class="text-14">文档中心</p>
                                </a>
                            </div>



                            <div class="document-item">
                                <a href="https://bbs.youzan.com/forum-97-1.html" target="_blank">
                                    <p class="text-14">开发者社区</p>
                                </a>
                            </div>



                            <div class="document-item">
                                <a href="https://doc.youzanyun.com/resource/notice-update/27201" target="_blank">
                                    <p class="text-14">平台公告</p>
                                </a>
                            </div>













                            <div class="document-item">
                                <a href="https://www.youzanyun.com/tyrannosaurus" target="_blank">
                                    <p class="text-14">霸王龙计划</p>
                                </a>
                            </div>



                        </div>
                    </div>
                </div>
                <div class="header-content">
                    <div class="header-item">
                        <a class="title" target="_blank" href="//diy.youzanyun.com/application/list">控制台</a>
                    </div>

                    <div class="header-item login">
                        <router-link to="/login"> <a class="title">登录</a>
                        </router-link>
                    </div>
                    <div class="header-item register">
                        <a class="title" href="/registered">注册</a>
                    </div>


                </div>
            </div>


        </header>
        <div class="menu-area">
            <div class="menu-area-wrapper">
                <div class="menu-area-title"><a class="search-logo-wrapper" href="/documentCenter"
                        target="_blank" rel="noopener noreferrer"><img class="search-logo"
                            src="https://b.yzcdn.cn/static/app-doc/img/revision-five/main-logo.png" alt=""></a></div>
                <router-link to="/developmentguide" class="item">开发指南</router-link>
                <router-link to="/apidocument" class="item">API文档</router-link>
                <router-link to="/message" class="item">消息文档</router-link>
                <router-link to="/extensionPoint" class="item">扩展点文档</router-link>
                <router-link to="/frontextension" class="item">前端扩展</router-link>
                <router-link to="/solution" class="item">解决方案</router-link>
                <router-link to="/commonproblem" class="item">常见问题</router-link>
                <router-link to="/operationnorm" class="item">运营规范</router-link>
                <router-link to="/announcement" class="item">平台公告</router-link>
            </div>
        </div>

    </div>
</template>

<script>
export default {

}
</script>

<style lang="less" scoped>
a {
    color: #646566;
}

.menu-area {
    display: flex;
    align-items: center;
    width: 100%;
    position: relative;
    z-index: 99;
    flex-direction: column;
    justify-content: center;
    height: 68px;
    margin: auto;
    background-color: #fff;

    .menu-area-wrapper {
        display: flex;
        align-items: center;
        width: 100%;
        justify-content: space-between;
        max-width: 1200px;
        height: 100%;
        margin: 0 auto;

        .item {
            font-size: 14px;
            cursor: pointer;
        }

        .menu-area-title {
            .search-logo-wrapper {
                width: 194px;
                margin-right: 40px;

                .search-logo {
                    height: 25px;
                }


            }
        }
    }
}

.home-header-nav .content .header-content .header-item.register .title {
    display: inline-block;
    width: 70px;
    height: 24px;
    margin-top: 7px;
    color: #2b90ed;
    line-height: 24px;
    text-align: center;
    background: #fff;
    border-radius: 2px;
}

.home-header-nav .content .header-content .header-item.login {
    margin-left: 30px;
}

.home-header-nav .content .header-content .header-item .drop-list {
    position: absolute;
    top: 38px;
    left: -30px;
    z-index: 9999;
    display: none;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    width: 300px;
    padding: 20px;
    background: #fff;
    box-shadow: 0 0 10px 0 rgb(0 0 0 / 10%);
}

.home-header-nav {
    div {
        box-sizing: content-box;
    }

    a {
        color: #646566;
    }

    z-index: 999;
    box-sizing: border-box;
    width: 100%;
    min-width: 1000px;
    height: 38px;
    color: #646566;
    font-size: 12px;
    background: #f2f3f5;

    .content {
        display: flex;
        justify-content: space-between;
        width: 100%;
        max-width: 1200px;
        min-width: 1000px;
        margin: 0 auto;

        .header-content {
            position: relative;
            display: flex;
            margin: 0;
            justify-content: flex-end;
            height: 100%;
            color: #999;
            font-size: 12px;

            .header-item {
                position: relative;
                padding: 0 15px;

                .title {
                    height: 38px;
                    line-height: 38px;
                    cursor: pointer;

                    .header-arrow-down {
                        width: 10px;
                        height: 6px;
                        margin-left: 4px;
                    }
                }

                .login {
                    margin-left: 30px;
                }

                .document-list {
                    // text-align: left;
                    left: 10px;
                    width: 96px;
                    padding: 10px 0;

                    .document-item {
                        width: 84px;
                        height: 30px;
                        padding-left: 12px;
                        line-height: 30px;
                        cursor: pointer;
                    }
                }

            }

            .header-item:first-child {
                padding-left: 0;
            }

            .header-item:last-child {
                padding-right: 0;
            }
        }
    }




}
</style>>
